<template>
  <TopHeader @back="back" @share="shareLink" :showMore="false"></TopHeader>
  <div class="mine-support bg-background">
    <img class="bg" src="/images/fqaBg.png" alt="FQA background" />
    <div class="content">
      <AvatarContainer class="mb-4" official-avatar>
        <template #buttons>
          <button class="primary-btn">
            <a href="https://linktr.ee/fantasi.one" target="_blank">
              {{ $t('common.contact') }}
            </a>
          </button>
        </template>
      </AvatarContainer>
      <div class="gap-col-16 mb-4 px-4">
        <div class="font-size-16 font-weight-500 line-height-140 d-flex">
          {{ $t('content.support.line1') }}
          <div class="text-subtitle-x ms-2">@support</div>
        </div>
        <div class="text-subtitle-x font-size-14 font-weight-500 line-height-120">
          {{ $t('content.support.line2') }}
          <span @click="toCreatorFaq" class="text-primary">{{ $t('content.support.line3') }}</span>
        </div>
      </div>
      <v-divider></v-divider>
      <SupportPanel />
      <v-divider></v-divider>
      <div class="text-subtitle-x font-size-12 font-weight-500 line-height-120 pt-4 px-4">
        {{ $t('content.support.line4') }}
        <a :href="'mailto:' + SUPPORT_MAIL" class="text-primary">{{ SUPPORT_MAIL }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { $t } from '@/i18n'
import AvatarContainer from '@/components/layout/creator/AvatarContainer.vue'
import TopHeader from '@/components/layout/creator/TopHeader.vue'
import SupportPanel from '@/components/mine/SupportPanel.vue'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { SUPPORT_MAIL } from '@/constant'

const emits = defineEmits(['back', 'toSamePage', 'toPage'])
const router = useRouter()

function back() {
  emits('back')
  router.replace({ name: 'mine', hash: '' })
}

function toCreatorFaq() {
  emits('toSamePage', `creator-faq`)
  router.replace({ path: '/mine/creator-faq' })
}

// copy link
const { copy } = useCopyToClipboard()
function shareLink() {
  const link = `${location.origin}/mine/faq`
  copy(link)
}
</script>

<style lang="scss" scoped>
.mine-support {
  width: 100%;
  min-height: 100%;
  padding-bottom: 10rem;

  .bg {
    background-color: #181925;
    max-width: 100%;
    width: 100%;
    max-height: 40.8vw;
    height: auto !important;
  }

  .content {
    height: calc(100% - 40.8vw + 2.5rem);
    transform: translateY(-2.5rem);
  }
}
.desktop {
  .mine-support .bg {
    height: calc((var(--desktop-main-width) - 2rem) * 0.5625);
  }
}
</style>
